<template>
  <div class="my-user-body">
    <div class="my-user-center">
      <div class="my-user-center-left">
        <ul class="my-user-menu-ul">
          <li v-for="item in menulist" :key="item.id">
            <router-link :to="item.address">{{ item.routername }}</router-link>
          </li>
        </ul>
      </div>

      <router-view class="my-user-center-right"></router-view>
    </div>
  </div>
</template>

<script>
// import { User, Star, Female, Position, Link } from "@element-plus/icons-vue";

export default {
  data() {
    return {
      menulist: [
        { id: 1, routername: "个人资料", routeraddress: "/myinfo/myuserinfo" },
        { id: 2, routername: "账号设置", routeraddress: "/myinfo/myuserinfo" },
        { id: 3, routername: "隐私设置", routeraddress: "/myinfo/myuserinfo" },
        { id: 4, routername: "信息认证", routeraddress: "/myinfo/myuserinfo" },
        { id: 5, routername: "我的收藏", routeraddress: "/myinfo/myuserinfo" },
      ],
    };
  },
};
</script>

<style scoped>
.my-user-body {
  width: 100%;
  height: 100vh;
  background-color: #eee;
}
.my-user-menu-ul {
  /* background-color: yellow; */
  padding-top: 5%;
  list-style: none;
}
.my-user-menu-ul li {
  /* background-color: skyblue; */
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
}
.my-user-menu-ul li:hover {
  background-color: #ddd;
}
.my-user-center {
  max-width: 1200px;
  height: 100vh;
  /* background-color: #fff; */
  margin: 1% auto;
  display: flex;
  box-sizing: border-box;
}
.my-user-center-left {
  width: 20%;
  height: 100%;
  background-color: #fff;
  box-shadow: 3px 0 15px #ccc;
  margin-right: 10px;
}
.my-user-center-right {
  width: 80%;
  height: 100%;
}
</style>